<template>
  <view>
    <view class="w100 pl-30 pr-30">
      <view class="w100 bgff mt-10 mb-10 pl-20 pr-20 pt-10 pb-10 br-20">
        <view class="rows rowsm mb-20">
          <!-- <scroll-view scroll-x="true" style="white-space: nowrap;"> -->
            <view class="rows rowsm h100" style="flex-wrap: wrap;">
              <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20 mt-10 mb-10" style="" v-for="(item, index) in taskType"
                :key="index"
                :style="active2 == taskType[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                @click="handelType(index)">{{ item.name }}</view>
            </view>
          <!-- </scroll-view> -->
        </view>
        <view class="rowsb rowsm mb-20">
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item, index) in taskTab"
                :key="index + 1"
                :style="active == taskTab[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                @click="handelTab(index)">{{ item.name }}</view>
            </view>
          </scroll-view>
        </view>
        <view class="rows rowsm mb-20">
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style=""
                v-for="(item, index) in completionStatus" :key="index"
                :style="active3 == completionStatus[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                @click="handelCompletion(index)">{{ item.name }}</view>
            </view>
          </scroll-view>
        </view>
        <view class="rows rowsm mb-20">
          <view class="title">发布时间：</view>
          <uni-datetime-picker v-model="allTime" type="daterange" @change="changeTime" start-placeholder="起始日期"
            end-placeholder="截至日期" />
        </view>
        <view style="text-align: right;" v-if="active != 2 && active3 != 1">获得积分: {{ allScore }}</view>
      </view>

      <view class="content-warp">
        <view class="item-warp" v-for="item in itemList" :key="item.id" @click="goPage(item)">
          <view class="txt-warp">
            <text class="fs-28 fw-600 requirement">{{ item.name }}</text>
            <view class="btn" v-if="item.status == '2' && item.isAnswer != '1'">作答</view>
            <view class="btn" v-else>{{ item.isAnswer == 0 ? '未作答' : '已作答' }}</view>
            <!-- <view class="btn" v-else>{{item.grade}}积分</view> -->
          </view>
          <view class="rows rowsm rowsb mb-20">
            <view>
              <text class="fs-26 fw-600">实践课程：</text>
              <text>{{ (taskType.find(v => v.value == item.practiceType) || {}).name }}</text>
            </view>
            <view>
              <text class="fs-26 fw-600">积分上限：</text>
              <text>{{ item.score }}</text>
            </view>
          </view>
          <view class="rows rowsm rowsb mb-20">
            <view>
              <text class="fs-26 fw-600">考试时间：</text>
              <text>{{ item.startTime.slice(0, 10) }} ~ {{ item.endTime.slice(0, 10) }}</text>
            </view>
            <view>
              <text class="fs-26 fw-600">获得积分：</text>
              <text>{{ item.haveScore || 0 }}</text>
            </view>
          </view>
          <view class="rows rowsm rowsb mb-10">
            <view>
              <text class="fs-26 fw-600">发布时间：</text>
              <text>{{ (item.releaseTime || '').slice(0, 16) }}</text>
            </view>
            <view>
              <text class="fs-26 fw-600">任务状态：</text>
              <text>{{ taskTab.find(v => v.value == item.status + 1).name }}</text>
            </view>
            <!-- <view>
				  <text class="fs-26 fw-600">完成情况：</text>
				  <text>{{ item.isAnswer == 0 ? '未作答' : '已作答' }}</text>
			  </view> -->
          </view>
        </view>
      </view>
      <view v-if="itemList.length == 0" class="notYet">
        暂无数据
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      active: 0,
      active2: 0,
      active3: 0,
      title: '',
      taskTab: [
        { name: '全部', value: 0 },
        { name: '未开始', value: 2 },
        { name: '进行中', value: 3 },
        { name: '已结束', value: 4 },
      ],
      taskType: [
        { name: '全部', value: 0 },
        // { name: '劳动教育', value: 1 },
        // { name: '职业素养', value: 2 },
        // { name: '应急安全', value: 3 },
        // { name: '思政实践', value: 4 },
        // { name: '创新创业', value: 5 }
      ],
      completionStatus: [
        { name: '全部', value: 0 },
        { name: '未作答', value: 1 },
        { name: '已作答', value: 2 },
      ],
      itemList: [],
      limit: {
        pageNum: 1,
        pageSize: 10,
      },
      allTime: '',
      allScore: 0,
    };
  },
  onLoad(e) {
    this.getTypeCongfigList();
  },
  onShow() {
    this.getList();
  },
  methods: {
    getTypeCongfigList() {
      this.$tools.axiosFromToken('GET', 'project/practice/type/config/listAll', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)

        this.taskType = [
          { name: '全部', value: 0 },
        ]
        res.rows.forEach(v => {
          this.taskType.push({ name: v.name, value: v.id })
        });
      })
    },
    handelTab(index) {
      // this.limit.pageNum = 1;
      this.active = this.taskTab[index].value;
      this.getList();
    },
    handelType(index) {
      // this.limit.pageNum = 1;
      this.active2 = this.taskType[index].value;
      this.getList();
    },
    handelCompletion(index) {
      // this.limit.pageNum = 1;
      this.active3 = this.completionStatus[index].value;
      this.getList();
    },
    getList(allTime) {
      const data = {
        status: this.active === 0 ? '' : this.active - 1,
        practiceType: this.active2 > 0 ? this.active2 : '',
        isAnswer: this.active3 === 0 ? 2 : this.active3 === 1 ? 0 : 1,
        name: this.value,
        startTime: allTime && allTime.length > 0 ? (allTime[0] + " 00:00:00") : null,
        endTime: allTime && allTime.length > 0 ? (allTime[1] + " 23:59:59") : null
      };
      // pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}&
      this.$tools.axiosFromToken('GET', `project/paper/list?student=1`, data, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        // this.total = res.total;
        // if (this.limit.pageNum == 1) {
        this.itemList = res.data.list;
        this.allScore = res.data.score;
        // } else {
        //   this.itemList = [...this.itemList, ...res.rows];
        // }
      })
    },
    changeTime(time) {
      this.allTime = time;
      this.getList(this.allTime);
    },
    goPage(item) {
      if (item.status == '3' || item.isAnswer == 1) {
        if (item.status == '3' && item.isAnswer == 0) return this.$tools.showtt('考试已结束，您未参加无法查看。');
        this.$tools.goNext(`/pagesCopy/trivia/analyze?item=${JSON.stringify(item)}`)
      } else {
        const timeStart = new Date(item.startTime.replace(" ", "T")).getTime();
        const timeEnd = new Date(item.endTime.replace(" ", "T")).getTime();
        const timestamp = new Date().getTime();
        if (timestamp >= timeStart && timestamp <= timeEnd) {
          this.$tools.goNext(`/pagesCopy/trivia/triviaTips?item=${JSON.stringify(item)}`)
        } else {
          if (timestamp > timeEnd) {
            this.$tools.showtt('考试已结束');
          } else {
            this.$tools.showtt('未到开始时间');
          }
        }
      }
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f5f7;

  ::v-deep .uni-date__x-input {
    height: auto !important;
    padding: 5px !important;
  }
}

::v-deep .uni-date {
  .uni-date__icon-clear {
    top: -5px;
  }
}

.mark {
  text-align: right;
  color: #f92929;
}

.title {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  // width: 300rpx;
  white-space: nowrap;
}

.title2 {
  color: #333;
  font-size: 28rpx;
  width: 120rpx;
}

.btnWarp {
  width: 140px;
  height: 49px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .u-button.data-v-2bf0e569 {
    height: 30px !important;
    margin-left: 10px;
  }

}

.content-warp {
  color: #333;
  font-size: 24rpx;

  .item-warp {
    padding: 24rpx;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 30rpx;

    .requirement {
      width: 60%;
      // 溢出显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .btn {
      font-size: 26rpx;
      border: 1px solid #5ac725;
      padding: 5px 10px;
      border-radius: 20px;
      color: #5ac725;
      background: #fff;
    }
  }

  .txt-warp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 30rpx;
      font-weight: 500;
    }
  }
}

.points {
  text-align: right;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.notYet {
  margin-top: 50rpx;
  width: 100%;
  text-align: center;
  font-weight: 0 !important;
}
</style>
